<template>
    <div id="app">
        <h2>{{title}}</h2>
        <input type="text" v-model="things"/>
        <button v-on:click="addthings" @keyup.enter="addthings">添加</button><br>
        <div v-for="(todo, index) in todos"
             :id="index">
            <input type="checkbox" v-bind:checked="todo.done"  @click="swithting(index)"/> {{index+1}}.
        <span v-bind:class="{del:todo.done}">
            {{todo.value}}</span>
            <time>{{todo.created|date}}</time>
        </div>
        <todo v-bind:total="todos.length" :nn="nn"></todo>
    </div>
    </div>
    </div>
</template>
<script>
    import todo from './Todo.vue'
    import moment from 'moment'
    import '../node_modules/moment/locale/zh-cn'
    moment.locale('zh-cn')
    export default {
        name: 'app',
        components:{todo},
        methods: {
            addthings: function () {
                this.todos.push({value: this.things, done: false})
            },
            swithting: function (index) {
                this.todos[index].done = !this.todos[index].done;
            }
        },
        computed: {
            nn:function(){
                var count=0;
                for(var i=0;i<this.todos.length;i++){
                    if(this.todos[i].done){
                        count++;
                    }
                }
                return count;
            }
        },

        data() {
            return {
                title: 'vue-todos',
                things: "",
                todos: [
                    {value: "阅读", done: false, created: new Date()},
                    {value: "补充", done: true, created: new Date()},
                    {value: "心得", done: false, created: new Date()}
                ]
            }},
        filters: {
            date: function (val) {
                //return (val.getHours() + ":" + val.getMinutes() + ":" + val.getSeconds())
                return moment(val).calendar()
            }
        }

    }

</script>
<style>
    .del{text-decoration:line-through}
</style>